<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 80px">
      <el-tab-pane label="委托订单" name="entrustOrder">
        <el-table :data="entrustTableData" :key="activeName" style="width: 100%" :cell-style="cellStyle">
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="amount" label="数量"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="最新成交" name="nowOrder">
        <el-table :data="nowTableData" :key="activeName" style="width: 100%" :cell-style="cellStyle">
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="amount" label="数量"></el-table-column>
          <el-table-column prop="date" label="时间" width="150"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {getOrderBooks, getTrans} from '@/api/modules/ticker'

  export default {
    name: "DealMainLeft",
    // props: ['currency', 'entrustTableData', 'nowTableData'],
    props: ['currency'],
    data() {
      return {
        interval: undefined
      }
    },
    created() {
      this.getOrderBooks()
      this.getTrans()

      // this.interval = setInterval(() => {
      //   this.getOrderBooks()
      // }, 1000);
      //
      // this.interval = setInterval(() => {
      //   this.getTrans()
      // }, 1000);

    },

    methods: {
      getOrderBooks() {
        getOrderBooks({currency: this.currency}).then(res => {
          this.entrustTableData = res.data.buy
          res.data.sell.forEach(item => {
            this.entrustTableData.push(item)
          })
          // console.log("获取当前委托信息", this.entrustTableData)
        })
      }
      ,
      getTrans() {
        getTrans({currency: this.currency}).then(res => {
          this.nowTableData = res.data
          // console.log("获取历史委托订单", this.nowTableData)
        })
      }
      ,
      handleClick(tab, event) {
        console.log(tab, event);
      }
      ,
      cellStyle(row, column, rowIndex, columnIndex) {
        if (row.row.type === "sell" && row.columnIndex == 0) {
          return 'color:red'
        } else if (row.row.type === "buy" && row.columnIndex == 0) {
          return 'color:#1890ff'
        }
      }
    }
    ,
    data() {
      return {
        activeName: 'entrustOrder',
        entrustTableData: [{
          price: '2,930.76',
          num: '0.23',
          type: 'buy'
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'buy'
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'buy'
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell'
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell'
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell'
        }],
        nowTableData: [{
          price: '2,930.76',
          num: '0.23',
          type: 'buy',
          date: "16:22:35"
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'buy',
          date: "16:22:35"
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'buy',
          date: "16:22:35"
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell',
          date: "16:22:35"
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell',
          date: "16:22:35"
        }, {
          price: '2,930.76',
          num: '0.23',
          type: 'sell',
          date: "16:22:35"
        }],
      }
    }
  }
</script>

<style scoped>

</style>
